<template>
    <div class="article-bottom">
         <van-cell center >
             <div slot="title">
                 <van-button @click="showAddComment" icon="search" color="#f6f8fa" round size="small" type="default">请输入评论内容</van-button>
             </div>
             <div slot="default" class="bottom-right">
                 <van-icon 
                   @click="$emit('scrollToComment')"
                   name="chat-o" 
                   :badge="articleInfo.comm_count > 99 ? '99+' : articleInfo.comm_count"
                 />
                 <van-icon 
                   :name="articleInfo.attitude === 1 ? 'good-job' : 'good-job-o' " 
                   :color="articleInfo.attitude === 1 ? 'orange' : '#323233'"
                   @touchstart="doLikeAticle"
                 />
                 <van-icon 
                   :name=" articleInfo.is_collected ? 'like' : 'like-o' " 
                   :color="articleInfo.is_collected ? '#ee0a24' : '#323233' "
                   @touchstart="doCollectAArticle"
                />
                 <van-icon name="share-o" />
             </div>
         </van-cell>
        
        <!-- //添加评论弹出层 -->

        <van-popup
        class="commentPopup"
        v-model="isShowAddComment"
        closeable
        @close="commentContent = ''"
        close-icon="close"
        position="bottom"
        round
        >
        <div class="comment-content">
            <div class="popup-header">
                <p>文章评论</p>
            </div>
            <div class="comment-input">
                <textarea  placeholder="请输入评论内容" v-model="commentContent" ></textarea>
            </div>
            <van-button 
              :disabled = " !commentContent ? true : false" 
              class="comment-btn"  
              round block 
              type="info" 
              @click="addComment"
              >
              发表
              </van-button>
        </div>
        
        
        </van-popup>

         <!-- //添加评论弹出层 -->

    </div>
</template>

<script>
import { 
     deleteArticleLike, 
     addArticleLike,
     addCollectArticle,
     deleteCollectArticle
    } from '@/api/article'
import { addArticleComment } from '@/api/comment'
import  bus from '@/utils/bus'
export default {
    name: 'Articlebottom',
    props: {
      articleInfo:{
          type: Object,
          require: true
      }
    },
    data() {
        return {
            isShowAddComment: false,
            commentContent:''
        };
    },

    mounted() {
        
    },

    methods: {
        // 对文章点赞
        async doLikeAticle () {
            if (this.articleInfo.attitude !==1) {
                const {data} =  await addArticleLike(this.articleInfo.art_id)
                if (data) {
                    this.articleInfo.attitude = 1
                    this.$toast.success('已关注')
                }
            }else {
                const {data} =  await deleteArticleLike(this.articleInfo.art_id)
                if (data) {
                    this.articleInfo.attitude = 0
                    this.$toast.success('已取消关注')
                }
                
            }
        },
        //收藏文章
        async doCollectAArticle () {
            if (!this.articleInfo.is_collected) {
                const data = await addCollectArticle(this.articleInfo.art_id)
                if (data) {
                    this.articleInfo.is_collected = true
                    this.$toast.success('收藏成功')
                }
            }else{
                const {data} = await deleteCollectArticle(this.articleInfo.art_id)
                if (data) {
                     this.articleInfo.is_collected = false
                     this.$toast.success('已取消收藏')
                }
               
            }
        },
        showAddComment () {
            this.isShowAddComment = true
        },
        //添加评论
        async addComment ()  {
            const {data:{data}} = await addArticleComment({
                target: this.articleInfo.art_id,
                content: this.commentContent
            })
            console.log(data)
            if (data) {
                this.$toast.success('发布成功')
                this.isShowAddComment = false
                // this.$emit('reloadArticle');
                bus.$emit('reloadComment');
                this. articleInfo.comm_count++
            }
        }
    },
};
</script>

<style lang="less" scoped>
.article-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /deep/.van-info{
            position: absolute;
            top: 9px;
            right: 0;
    }
    /deep/.van-button{
        width: 100%;
        .van-button__text{
            color: #000;
        }
        .van-icon-search{
            color: #000;
        }
    }
    .bottom-right{
        display: flex;
        justify-content: space-between;
        margin-left: 15px;
      /deep/.van-icon {
          color: unset;
          font-size: 25px;
      }
    }
    .commentPopup{
    //  padding: 10px;
    height: 250px;
    /deep/.van-icon-close{
        color:#c8c9cc;
    }
   
    .van-field__value{
        padding-right: 10px;
    }
    .comment-content{
        
        .popup-header{
        padding: 10px;
        color: #666;
        font-weight: 500;
        font-size: .42667rem;
    }
         .comment-btn{
        position: absolute;
        bottom: 10px;
        .van-button__text{
            color: #fff;
        }
        
    }
        .comment-input {
            padding: 10px;
            border: none;
            height: 100px;
            textarea{
                border: none;
                font-size: 16px;
                width: 100%;
                height: 100%;
                color: #666;
                word-break: break-all;
            }
        }
    }
  }
}

</style>